<template>
	<view>
		<view class="withdraw-header">
			<text class="withdraw-header-text">收款订单</text>
			<view class="create-time-choose">
				<text class="create-time-choose-text" @click="dateShowFunc">日期选择</text>	
				<u-calendar v-model="dateShow" :mode="dateMode" @change="chooseDate" btn-type="success" range-bg-color="#36BE6A" active-bg-color="#36BE6A"></u-calendar>
			</view>
		</view>
		<view v-if="list.length == 0" style="padding-top: 150rpx;">
			<u-empty text="暂无收款订单" mode="list"></u-empty>
		</view>
		<view v-else class="box" v-for="(item,index) in list" :key="index">
			<view class="box-top" >
				<view class="top-title">
					订单编号: {{item.orderid}}
				</view>
				<view class="top-icon" @click="copy(item.orderid)"></view>
				<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/Store/Group%203810%402x.png" mode="" class="top-img"></image>
			</view>
			<view class="bottom-box">
				<view class="box-main">
					<view class="sp">
						<text style="color: #333333;">支付金额：</text><text style="color:#E67711">￥{{item.pay_money}}</text>
					</view>
					<view class="sp">
						<text style="color: #333333;">结算金额：</text><text style="color:#E67711">￥{{item.shop_money}}</text>
					</view>		
					<view class="sp">
						<text style="color: #333333;">让利金额：</text><text style="color:#E67711">￥{{item.rl_money}}</text>(让利比:{{item.bili}}%)
					</view>
					<view class="sp">
						<text style="color: #333333;">支付金抵扣金额：</text><text style="color:#E67711">￥{{item.coupon_money}}</text>
					</view>
					<view class="sp" style="width: 100%;">
						<text style="color: #333333;">支付时间：</text>{{item.pay_time}}
					</view>
				</view>
			</view>
		</view>

		
		<u-loadmore :status="loadMoreStatus" @loadmore="loadList"/>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadMoreStatus: "loadmore",
				list:[],
				Params:{
					pagesize:10,
					page:1,
					createTime:''
				},
				dateShow: false,
				dateMode: 'date'
			}
		},
		onLoad() {
			this.loadList()
		},
		onShow() {
			// this.$u.api.shop.GetshopOrder().then(res =>{
			// 	if(res.code == 200){
			// 		this.list = res.data
			// 	}
			// })
		},
		methods:{
			copy(value){
				uni.setClipboardData({
				 	data: value,
				    success: function () {
				        console.log('success');
				    }
				})
			},
			chooseDate(obj){
				console.log(obj,obj.result)
				this.Params.createTime = obj.result
				this.Params.page = 1
				this.list = []
				this.loadList()
			},
			dateShowFunc(){
				this.dateShow=true
			},
			loadList(){
				this.loadMoreStatus = 'loading'; 
				this.$u.api.shop.GetshopOrder(this.Params).then(res => {
					this.loadMoreStatus = 'loadmore'; 
					if(res.code != 200){
						return false
					}
					if(res.data == undefined || res.data.length <= 0){
						this.loadMoreStatus = 'nomore'; 
						return false
					} 
					
					this.list = [...this.list,...res.data]
					this.Params.page++
				}).catch(err => {
					this.loadMoreStatus = 'loadmore'; 
				})
			},
		}
	}
</script>

<style>
	.box{
		width: 690rpx;
		height: 288rpx;
		margin-left: 30rpx;
		margin-top: 20rpx;
		background-color: white;
		border-radius: 16rpx;
	}
	.box-top{
		width: 100%;
		height: 82rpx;
		border-bottom: 2rpx dotted #EEEEEE;
		position: relative;
		
	}
	.top-title{
		height: 82rpx;
		width: 470rpx;
		margin-left: 30rpx;
		line-height: 82rpx;
		font-size: 28rpx;
		color: #848590;
		font-family: PingFang SC-Medium;
		font-weight: Medium;
	}
	.top-icon{
		width: 22rpx;
		height: 24rpx;
		position: absolute;
		top: 29rpx;
		left: 505rpx;
		background: url('https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/Store/Group%203802%402x.png') center/cover;
	}
	.top-img{
		width: 108rpx;
		height: 38rpx;
		position: absolute;
		top: 0;
		right: 0;
	}
	.bottom-box{
		width: 100%;
		height: 206rpx;
	}
	.box-main{
		width: 100%;
		height: 100%;
		display: flex;
		flex-wrap: wrap;
	}
	.sp{
		width: 50%;
		height: 68rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium;
		font-weight: Medium;
		color: #848590;
		display: flex;
		align-items: center;
		padding-left: 20rpx;
	}
	.withdraw-header{display: flex;justify-content: space-between;padding:0 40rpx;}
	.withdraw-header-text{font-family: PingFang SC, PingFang SC;font-weight: bold;font-size: 36rpx;color: #333333;line-height: 102rpx;text-align: left;font-style: normal;text-transform: none;}
	.create-time-choose{display: flex;align-items: center;}
	.create-time-choose-text{display: block;font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 24rpx;color: #9FA3A4;line-height: 62rpx;text-align: left;font-style: normal;text-transform: none;background: url('@/static/images/datechoose.png') no-repeat center center;background-size: 100% 100%;width: 166rpx;height: 62rpx;padding-left: 18rpx;}
</style>